<div class="lx-step" ng-class="lxStep.getClasses()">
    <div class="lx-step__nav" ng-if="lxStep.parent.layout === 'vertical'">
        <lx-step-nav lx-active-index="{{ lxStep.parent.activeIndex }}" lx-step="lxStep.step"></lx-step-nav>
    </div>

    <div class="lx-step__wrapper" ng-if="lxStep.parent.activeIndex === lxStep.step.index">
        <div class="lx-step__content">
            <ng-transclude></ng-transclude>

            <div class="lx-step__progress" ng-if="lxStep.step.isLoading">
                <lx-progress lx-type="circular"></lx-progress>
            </div>
        </div>

        <div class="lx-step__actions" ng-if="lxStep.parent.activeIndex === lxStep.step.index && lxStep.parent.controls">
            <div class="lx-step__action lx-step__action--continue">
                <lx-button ng-click="lxStep.submitStep()" ng-disabled="lxStep.isLoading">{{ lxStep.parent.labels.continue }}</lx-button>
            </div>

            <div class="lx-step__action lx-step__action--cancel" ng-if="lxStep.parent.cancel">
                <lx-button lx-color="black" lx-type="flat" ng-click="lxStep.parent.cancel()" ng-disabled="lxStep.isLoading">{{ lxStep.parent.labels.cancel }}</lx-button>
            </div>

            <div class="lx-step__action lx-step__action--back" ng-if="lxStep.parent.isLinear">
                <lx-button lx-color="black" lx-type="flat" ng-click="lxStep.previousStep()" ng-disabled="lxStep.isLoading || lxStep.step.index === 0">{{ lxStep.parent.labels.back }}</lx-button>
            </div>
        </div>
    </div>
</div>
